<template>
  <div class="out_div">
    <div v-if="currentMode===currentModeList.LIST" class="baseList">
      <el-form class="searchForm" size="small" ref="tableSearchForm" :model="tableSearchForm">
        <el-row :gutter="5">
          <el-col :span="6">
            <el-form-item prop="tableName" label="表名称:">
              <el-input clearable placeholder="请输入表名称"
                        v-model="tableSearchForm.tableName"
                        name="tableName" operator="="/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button icon="el-icon-search" type="primary" size="mini"
                       @click="searchTableHandler">查询
            </el-button>
            <el-button icon="el-icon-refresh-right" type="info" size="mini"
                       @click="resetTableHandler">重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <toolbar @on-import="importHandler" :privileges="btnPrivileges"
               :keys="['import']"/>
      <paginatable :keys="['preview','gen','edit','del']" :privileges="btnPrivileges"
                   v-loading="tableTblOpts.loading"
                   @row-edit="editTableHandler"
                   @row-del="delTableHandler"
                   @row-gen="genTableHandler"
                   @row-preview="previewTableHandler"
                   @on-pagination="paginationTableHandler"
                   :tblOpts="tableTblOpts"/>
    </div>
    <el-container v-if="currentMode===currentModeList.EDIT" class="baseEdit">
      <el-header>
        <el-row>
          <el-col :span="12">
            <el-page-header @back="backHandler" content="详情页面">
            </el-page-header>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
      </el-main>
      <el-footer>
        <toolbar @on-save="saveTableHandler" :privileges="btnPrivileges"
                 :keys="['save']"/>
      </el-footer>
    </el-container>
    <importTable ref="import" @ok="okHandler"></importTable>
    <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body>
      <el-tabs v-model="preview.activeName">
        <el-tab-pane style="max-height:600px;overflow-y:scroll"
                     v-for="(value, key) in preview.data"
                     :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
                     :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
                     :key="key"
        >
          <pre>{{ value }}</pre>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import paginatable from '@/components/paginatable'
import toolbar from '@/components/toolbar'
import * as tools from '@/utils/tools'
import * as tableApi from '@/api/systool/gen/table'
import * as menuApi from '@/api/sys/menu'
import importTable from "../importTable";

export default {
  name: 'gen',
  data() {
    return {
      //  预览参数
      preview: {
        open: false,
        title: "代码预览",
        data: {},
        activeName: "entity.java"
      },
      currentModeList: this.$config.currentShow,
      currentMode: this.$config.currentShow.LIST,
      formLoading: false,
      tableSearchForm: {
        tableName: '',
      },
      tableTblOpts: {
        fitCols: true, loading: false,
        cols: [
          {
            prop: 'tableName',
            label: '表名称'
          }
          ,
          {
            prop: 'tableComment',
            label: '表描述'
          }
          ,
          {
            prop: 'className',
            label: '实体类名称'
          }
        ],
        data: [],
        selection: []
      },
      btnPrivileges: [],
      searchTableConditions: []
    }
  },
  components: {
    paginatable,
    toolbar,
    importTable
  },
  methods: {
    importHandler() {
      this.$refs.import.show()
    },
    resetTableHandler() {
      this.$refs.tableSearchForm.resetFields()
    },
    clearEdit() {
      if (this.$refs.tableEditForm) {
        this.$refs.tableEditForm.resetFields()
      }
    },
    backHandler() {
      this.formLoading = false
      this.currentMode = this.$config.currentShow.LIST
      this.clearEdit()
      this.paginationTableHandler()
    },
    async saveTableHandler() {
      let valid = await this.$refs.tableEditForm.validate()
      if (valid) {
        this.formLoading = true
        tableApi.save(this.tableEditForm).then(resp => {
          this.formLoading = true
          if (resp.meta.success) {
            tools.notify({
              type: 'success',
              message: '保存成功'
            })
            this.backHandler()
          }
        }).catch(resp => {
          this.formLoading = true
        })
      } else {
        tools.notify({
          type: 'warning',
          message: '请按要求填写'
        })
      }
    },
    genTableHandler(row) {
      console.log(row.tableId)
      tableApi.gen(row.tableId)
    },
    previewTableHandler(row) {
      tableApi.preview(row.tableId).then(response => {
        this.preview.data = response.data;
        this.preview.open = true;
      });
    },
    delTableHandler(row) {
      this.$confirm('确定要删除这条记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tableApi.del(row.tableId).then(resp => {
          this.paginationTableHandler(this.tableTblOpts.pageNo)
          tools.notify({
            type: 'success',
            message: '删除成功'
          })
        })
      }).catch(() => {
      })
    },
    addTableHandler() {
      this.currentMode = this.$config.currentShow.EDIT
      this.clearEdit()
    },
    editTableHandler(row) {
      this.currentMode = this.$config.currentShow.EDIT
      this.clearEdit()
      tableApi.load(row.id).then(resp => {
        if (resp.meta.success) {
          tools.assignVal(this.tableEditForm, resp.data)
        }
      })
    },
    searchTableHandler() {
      this.searchTableConditions = []
      if (this.tableSearchForm.tableName) {
        let val = this.tableSearchForm.tableName
        this.searchUserConditions.push({
          field: 'tableName',
          operator: 'like',
          values: val instanceof Array ? [...val] : [val]
        })
      }
      this.paginationTableHandler(this.tableTblOpts.pageNo)
    },
    paginationTableHandler(pageNo) {
      this.$set(this.tableTblOpts, 'pageNo', pageNo || 1)
      this.tableTblOpts.loading = true
      tableApi.pagination(this.tableTblOpts, this.searchTableConditions).then(resp => {
        this.tableTblOpts.data = resp.data.records
        Object.assign(this.tableTblOpts, {total: Number(resp.data.total)})
        this.tableTblOpts.loading = false
      })
    },
    okHandler() {
      this.searchTableHandler()
    },
  },
  mounted() {
    let menuId = this.$route.meta.id
    menuApi.getMenuBtn(menuId).then(resp => {
      this.btnPrivileges = resp.data
    })
    this.searchTableHandler()

  }
}
</script>
